<template>
    <div class="item-content mb-16 lighter">
        <div class="avatar">
          <img :src="Avatar" height="32px" width="32px" />
        </div>
        <div :class="`content`" style="width: calc(100% - 40px);">
          <!-- {{ props.chatRecord  }} -->
          <el-card class="mb-8 border-r-8" v-if="Array.isArray(props.chatRecord?.parseInfos)">
            <!--- 意图理解 -->
            <div class="thought mb-20">
                <h3 class="content_tite"><svg-icon icon-class="ytlj" />意图理解</h3>
                <div class="content_des mb-20" v-html="thought" style="white-space: pre-line;"></div>
                <div class="lin"></div>    
            </div>
            <!-- 查询结果(table 图表)-->
            <div :class="['mb-20', (props.chatRecord.pending && !queryResult.queryResults.length && !isDataReport) ? 'is-hidden-box' : '' ]">
                <h3 class="content_tite"><svg-icon icon-class="cxjg" />查询结果</h3>
                <RenderEcharts v-if="!isDataReport" :queryResult="queryResult" :item="props.chatRecord"/>
                <iframe v-else :src="dataReportUrl"  class="chat-iframe"></iframe>
                <div class="lin"></div>  
            </div>
            <!---数据解读-->
            <div v-if="!isDataReport" :class="[(props.chatRecord.pending && !textSummary) ? 'is-hidden-box' : '']">
                <h3 class="content_tite"><svg-icon icon-class="sjjd" />数据解读</h3>
                <div v-html="textSummary" style="white-space: pre-line;"></div>
            </div>
            <p :class="['bottom-text', (props.chatRecord.pending && !textSummary) ? 'is-hidden-box' : '']">解读由Chat BI生成，仅供参考</p>
          </el-card>
          <el-card class="mb-8 border-r-8" v-else>
            <div style="position: relative; height: 300px; min-width: 500px; display: block; margin-top: 30px;">
              <PageEmpty :type="'1'" :text1="'数据查询失败'" :text2="' '"/>
            </div>
          </el-card>
          <!-- <div class="flex" style="margin-left: 40px">
            <el-button
                type="primary"
                @click="startChat(chatRecord)"
                link
            >
              <el-icon style="margin-right: 5px;"><Refresh /></el-icon>
              重新回答
            </el-button>
            <el-button
                type="primary"
                @click="stopChat(chatRecord)"
                link
            >
              <img src="@/assets/agent/chat/tingzhi.svg" style="width: 16px;margin-right: 5px;" alt="">
              停止回答
            </el-button>
          </div> -->
        </div>
    </div>
  </template>
  <script setup lang="ts">
  import { computed } from 'vue'
  import Avatar from '@/assets/agent/def_agent.svg'
  import RenderEcharts from './RenderEcharts.vue'

  const props = defineProps<{
    chatRecord: any
  }>()
  /* 是否是数据报表，如果是需要嵌套iframe页面，默认是数据集*/
  const isDataReport = computed(()=> {
    const { chatRecord } = props;
    const parseInfos = chatRecord?.parseInfos || [];
    return parseInfos.length > 0 && parseInfos[0].queryMode === "CHART";
  }); 
  /** 拼接iframe页面地址 */
  const dataReportUrl = computed(()=> {
    // props.chatRecord?.queryResult?.queryState === 'EMPTY' && props.chatRecord?.parseInfos[0].queryMode === "CHART"
    if (props.chatRecord?.parseInfos[0].queryMode === "CHART"){
      const properties = props.chatRecord?.parseInfos?.[0]?.properties || {};
      const { chart_id, select_fields = [] } = properties;
      return `http://43.138.195.6:9080/davinci/#/widget/${chart_id}?mode=view&selectFields=${select_fields.join()}`
    }
    return ''
  })

 /** 意图理解 */
  const thought = computed(()=> {
    if(props.chatRecord?.queryResult?.queryState === 'SUCCESS' || props.chatRecord?.tylj_pending) {
      return props.chatRecord?.queryResult?.chatContext?.properties?.thought || ''
    } else if(props.chatRecord?.parseInfos[0].queryMode === "CHART") {
      return props.chatRecord?.parseInfos[0].properties.thought
    }
    return ''
  })

  /** table 图表 */
  const queryResult = computed(() => {
    return props.chatRecord?.queryResult || '' 
  })
  /** 数据解读 */
  const textSummary = computed(() => {
    return props.chatRecord?.queryResult?.textSummary || ''
  })

  // const stopChat = (chat: any) => {
  //   console.log(chat)
  // }
  // const startChat = (chat: any) => {
  //   console.log(chat)
  // }
  </script>

  <style lang="scss" scoped>
  .content-flex {
    display: flex !important;
    align-items: center;
    padding-left: 7px !important;
    .width-150 {
      width: 150px;
    }
  
  }
  .content {
    :deep(.el-card) {
      border: none;
      box-shadow: none;
    }
    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    .loading-img {
      animation: rotate 2s linear infinite;
      width: 16px;height: 16px;position: relative; top: 4px;
    }
  }

  .content_tite{
    height: 19px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #3067EF;
    line-height: 19px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: 8px;
    svg{
        margin-right: 4px;
    }
  }

  .lin{
    width: 100%;
    height: 1px;
    background: #d9d9d9;
  }

  .content_des{
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 13px;
    color: #333333;
    line-height: 20px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .bottom-text{
    height: 18px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: rgba(0,0,0,0.4);
    line-height: 18px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    padding-top: 8px;
  }

  .item-content{
     display: flex;
  }

  .item-content .avatar{
    margin-right: 8px;
  }

  .chat-iframe{
    width: 100%;
    min-height: 500px;
    border: none;
    box-sizing: border-box;
    padding: 20px;
  }

  .is-hidden-box{
    display: none !important;
  }
  </style>
  